<template>
  <div
    class="detail"
    v-loading="loading"
  >
    <el-space
      direction="vertical"
      fill
      :size="20"
    >
      <template v-if="detail">
        <el-card>
          <template #header>
            <div class="card-header title">
              <!-- [{{ detail?.baseMarcInfoDto?.docName }}]&nbsp;&nbsp; -->
              {{ detail?.baseMarcInfoDto?.titles }}
            </div>
          </template>
          <div class="flex">
            <template v-if="detail?.bean2List.length">
              <ul>
                <li v-for="item in detail.bean2List">
                  【{{ item.description }}】&nbsp;&nbsp;<span
                    v-html="item.fieldVal"
                  ></span>
                </li>
              </ul>
            </template>
            <book-cover
              :cover="cover?.url"
              :empty="cover?.empty"
              :title="detail?.baseMarcInfoDto?.title"
            />
          </div>
        </el-card>
      </template>
      <el-card class="w-full">
        <el-tabs
          type="border-card"
          v-model="tabsActv"
          @tab-click="handleTabsClick"
        >
          <el-tab-pane
            label="馆藏信息"
            name="1"
          >
          <template v-if="booksList.length">
            <el-table
              :data="booksList"
              border
            >
              <el-table-column
                label="序号"
                type="index"
                width="60"
                align="center"
              />
              <el-table-column
                v-for="column in tableColumns"
                :prop="column.prop"
                :label="column.label"
                :sortable="column.sortable"
              >
                <template #default="{ row }">
                  <template v-if="column.dictKey">
                    {{ circAttrMap[row[column.prop]] }}
                  </template>
                  <template v-else>
                    {{ row[column.prop] || "-" }}
                  </template>
                </template>

                <!-- {{ column.label }} -->
              </el-table-column>
            </el-table>
          </template>

          </el-tab-pane>
          <el-tab-pane
            label="详细书目"
            name="2"
          >
            <div v-html="richtext"></div>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-space>
  </div>
</template>

<script setup>
import BookCover from "@/components/book-cover/book-cover.vue";
import { find } from "@/api/modules/find";
import { getDicItemMap } from "@/utils/dict/index";
const { detailInfo } = inject("detail-store");
const loading = ref(false);
const Route = useRoute();
const tabsActv = ref("1");
const detail = ref();
const recommendList = ref();
const cover = ref({});

const tableColumns = ref([
  //   { label: "序号", prop: "" },
  { label: "索书号", prop: "callNo", sortable: true },
  { label: "排架号", prop: "shelfNo", sortable: true },
  { label: "条码号", prop: "barcode" },
  { label: "年代", prop: "year", sortable: true },
  { label: "馆藏地", prop: "realLocationName" },
  { label: "入藏时间", prop: "inDate", sortable: true },
  { label: "当前所在地", prop: "curLocationName" },
  { label: "书刊状态", prop: "processType" },
  { label: "借阅属性", prop: "circAttr", dictKey: "circAttr" },
]);

const booksList = ref([]);

const circAttrMap = ref({});

const richtext = ref();

const handleTabsClick = ({ index }) => {
  console.log("handleTabsClick", index);
};

function getDetail() {
  let recordId = detailInfo.value.recordId;
  find.searchResultDetail
    .getDetail({
      recordId,
    })
    .then(({ data }) => {
      console.log("find.searchResultDetail.getDetail", data);
      detail.value = data;
      getCover({
        title: data.baseMarcInfoDto.title,
        isbn: data.baseMarcInfoDto.isbn,
        recordId: recordId,
      });
      richtextGet();
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
}
function getRecommendList(recordId) {
  find.unify
    .searchForDetail({
      subject: [],
      kindNo: [],
      excludeField: "record_id",
      excludeFieldContent: recordId,
      sortField: "relevance",
      sortClause: "asc",
      page: 1,
      rows: 10,
    })
    .then(({ searchResult }) => {
      getCovers(searchResult).then((list) => {
        console.log("find.unify.searchForDetail", list);
        recommendList.value = list;
      });
    });
}
function getCover(params) {
  find.book.getDuxiuImageUrl(params).then(({ data }) => {
    console.log("getDuxiuImageUrl", data);
    cover.value = {
      url: data || detailInfo.value.cover,
      empty: !data,
    };
  });
}

function booksListGet() {
  //   {"page":1,"rows":10,"entrance":null,"recordId":"339939","isUnify":true,"sortType":0}
  find.physical
    .groupitems({
      page: 1,
      rows: 100,
      entrance: null,
      recordId: detailInfo.value.recordId,
      isUnify: true,
    })
    .then(({ data: { list } }) => {
      console.log("groupitems", list);
      booksList.value = list;
    });
}
function circAttrMapGet() {
  getDicItemMap("circAttr").then((data) => {
    circAttrMap.value = data;
  });
}
function richtextGet() {
  const content = detail.value?.bean2List?.find(
    (item) => item.description === "提要文摘附注"
  )?.fieldVal;
  richtext.value = `<h3>内容简介</h3><p>${content}<p>`;
}
onMounted(() => {
  console.log("detailInfo", detailInfo.value);
  loading.value = true;
  getDetail();
  booksListGet();
  circAttrMapGet();
});
</script>

<style lang="scss" scoped>
.detail {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;

  .title {
    font-size: 20px;
    font-weight: bold;
  }
  :deep(a) {
    color: inherit;
    text-decoration: unset;
  }
}
</style>
